<template>
  <div>
    <!--
     指令的本质上是函数
    -->
    <h3>当前n的值是:<span v-text="n"></span></h3>
    <h3>放大10倍后的值是:<span v-big="n"></span></h3>
    <el-button type="primary" @click="n++">点我n+1</el-button>
    <el-divider/>
    <input type="text" v-my-bind:value="n"/>

    <!--    注意  指令名有多个单词建议用-号分隔 ，下面的函数名
        简写是big，写全是'big':function()-->
  </div>
</template>

<script>
export default {
  name: "directives",
  data() {
    return {
      n: 1
    }
  },
  directives: {
    big(element, binding) { // element: span元素
      console.log('big')
      element.innerText = binding.value * 10
    },
    /**
     * 两种情况下v-big指令会执行 ：
     *  1、指令与元素成功绑定时（一上来）
     *  2、指令用到的数据 这里是n重新被解析时
     *
     */
    'my-bind': {
      // 指令与元素成功绑定时（一开始）

      bind(element, binding) {
        element.value = binding.value
      },
      // 指令所在元素被插入页面时
      inserted(element, binding) {
        element.focus()
      },
      // 指令所在的模板被重新解析时
      update(element, binding) {
        element.value = binding.value
      },
    }
  }
}
</script>

<style scoped>

</style>
